<!-- 右侧选择画布page的面板 -->
<template>
	<div class="page-wrapper">
		<BaseModuleCard>
			<template #title>样式</template>
			<template #content>
				<a-form>
					<a-form-item label="背景颜色">
						<ColorPicker v-model="sketchRuleState.canvasOpts.canvasBgColor"></ColorPicker>
					</a-form-item>
					<a-form-item label="缩放比例">
						<a-input-number
							id="inputNumber"
							v-model:value="sketchRuleState.rulerOpts.paddingRatio"
							:min="0"
							:max="1" />
					</a-form-item>
					<a-form-item label="分辨率">
						<a-row :gutter="10">
							<a-col class="color-wrapper">
								<span>宽</span>
								<a-input-number
									id="inputNumber"
									v-model:value="sketchRuleState.rulerOpts.canvasWidth"
									:min="0"
									:max="5000" />
							</a-col>
							<a-col class="color-wrapper">
								<span>高</span>
								<a-input-number
									id="inputNumber"
									v-model:value="sketchRuleState.rulerOpts.canvasHeight"
									:min="0"
									:max="5000" />
							</a-col>
						</a-row>
					</a-form-item>
					<a-form-item label="大屏名称">
						<a-input v-model:value="sketchRuleState.canvasOpts.canvasName"></a-input>
					</a-form-item>
				</a-form>
			</template>
		</BaseModuleCard>
	</div>
</template>
<script setup>
import BaseModuleCard from "../BaseModuleCard/BaseModuleCard.vue";
import ColorPicker from "@/components/ColorPicker/ColorPicker.vue";
import { storeToRefs } from "pinia";
import { useSketchRuleStore } from "@/stores/sketchRule";
const sketchRuleStore = useSketchRuleStore();
const { sketchRuleState } = storeToRefs(sketchRuleStore);
import { reactive } from "vue";
</script>
<style scoped lang="scss">
.page-wrapper {
	height: 100%;
	width: 100%;
	.color-wrapper {
		display: flex;
		align-items: center;
		span {
			margin-right: 5px;
		}
	}
}
</style>
